<template>
    <f7-popup :opened="myPop" @popup:open="popOpen()">
         <f7-navbar title="添加同类产品"></f7-navbar>
        <f7-page bg-color="white">
             <div class="bg-personpage">
                <template>
                    <ul class="shopcar-list">
                        <li v-for="item in data.product_name" @click="addPro(item)"><h4>{{item.name}}</h4></li>
                    </ul>
                </template>
            </div>
            <div class="clearfix"></div>
             <div class="bg-personpage list-add-checkbox">
                <template>
                    <ul class="shopbar-list">
                        <li v-for="item,index in result" style="margin-bottom:10px ">
                             <label  class="checkbox Check_box"><input type="checkbox"><i class="icon-checkbox"></i></label>
                            <div v-if="item._id!='zidingyimingcheng'" class="item-input">{{item.name}} <span @click="rmPro(index)" class="float-right">删除</span></div>
                            <div v-if="item._id=='zidingyimingcheng'" class="item-input"><input type="text" placeholder="自定义名称" class="custom" > <span @click="rmPro(index)" class="float-right">删除</span></div>
                            <div v-for="itm in item.proAttr.attribute" class="item-input">
                                {{itm.name}}（{{itm.unit}}）<input type="text" placeholder="请填写" style="display: inline-block" v-model="itm.value" class="float-right text-align-right itm_input">
                            </div>
                        </li>
                    </ul>
                </template>
            </div>













            <f7-toolbar>
                <f7-block class="addSelecToolbar">
                    <f7-link @click="prductSubmit()">确定</f7-link>
                </f7-block>
                <f7-block class="addSelecToolbar">
                    <f7-link @click="closePop()">关闭</f7-link>
                </f7-block>
            </f7-toolbar>
        </f7-page>
    </f7-popup>
</template>
<script>
    import common from '../utils/common.js'
    export default {
        name: "setProductCategory",
        props:['productCategory','data'],
        data () {
            return {
                myPop: false,
                result:[]
            }
        },
        methods:{
            openPop () {
                this.myPop = true
            },
            closePop () {
                this.myPop = false
            },
            popOpen () {
                this.data.product_name.push({
                    name:"自定义名称",
                    _id:"zidingyimingcheng"
                })
            },
            clearDate(){
                this.result=[]
            },
            prductSubmit(){
                this.$emit('setProductCateDoneEmit',{
                    productCate:this.result
                })
                this.closePop()
            },
            addPro(item){
                let temp;
                if(item=='zdy'){
                    temp={
                        name:" ",
                        _id:"zidingyimingcheng"
                    }
                }else{
                    temp=JSON.parse(JSON.stringify(item));

                }
                //给每个产品添加属性
                temp.proAttr=JSON.parse(JSON.stringify(this.data))
                if(temp.proAttr.measure_unit.length>0){
                    temp.proAttr.attribute.unshift(temp.proAttr.measure_unit[0])
                }
                temp.value=0
                this.result.push(temp)
            },
            rmPro(index){
                this.result.splice(index,1)
            }

        },
        mounted(){
            // this.$set()

        }

    }
</script>

<style scoped>
    .addSelecToolbar {
        text-align: center;
    }
    h4 {
        margin: 0;
    }
.bg-personpage{
    margin-top: 10px;
    width: 100%;
}
.list-add-checkbox {
    position: relative;
    margin-left: 15px;
}
.shopcar-list{
     margin: 0px 10px;
      padding: 0px;
    }
.shopcar-list li {
    float: left;
    margin: 10px 2px 0 2px;
}
.shopcar-list li h4 {
    background: #f0f0f0;
    padding: 5px 12px;
    border-radius: 20px;
    color: #999;
}
.clearfix {
    clear: both;
}
.shopbar-list{
     margin: 0px 10px;
    padding: 0px;
}
.list-add-checkbox .Check_box {
    position: absolute;
    left: -12px;
    top: 2px;
    display: inline-block;
    padding: 7px 7px;
    cursor: pointer;
    z-index: 99;
}
.item-input {
    border: none;
    border-bottom: 1px solid #f5f5f5;
    margin: 0;
    padding: 9px 15px;
    font-size: 14px;
    color: #333;
}
.custom{
    display: inline;
}
.itm_input{
    width: 170px;
}
</style>
